<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-04 10:54
  PageName：d_practice4_DynamicInteraction.html
  Function：实战案例 - 设计动态交互特效（js）
  URL：http://localhost:8080/i_table/i6_practice/d_practice4_DynamicInteraction.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计动态交互特效（js）</title>

    <script language="javascript">
        // bg_even("表格ID属性名","奇数行背景色","偶数行背景色","鼠标经过背景色","点击后背景色");
        function bg_even(o, a, b, c, d) {
            // 获取对数据行的控制
            var t = document.getElementById(o).getElementsByTagName("tr");
            //遍历数据表中每一行
            for (var i = 0; i < t.length; i++) {
                // 判断数据行的奇偶位置，分别设置不同的背景色
                t[i].style.backgroundColor = (t[i].sectionRowIndex % 2 == 0) ? a : b;
                // 定义鼠标单击事件函数，设计背景色的单击开关效果
                t[i].onclick = function () {
                    if (this.x != "1") { //如果没有单击，则设置单击背景色
                        this.x = "1";
                        this.style.backgroundColor = d;
                    } else {  //如果已经单击，则恢复原来的背景色
                        this.x = "0";
                        this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) ? a : b;
                    }
                }
                // 定义鼠标经过事件函数，设计鼠标经过行的背景色效果
                t[i].onmouseover = function () {
                    if (this.x != "1") this.style.backgroundColor = c;
                }
                // 定义鼠标离开事件函数，设计鼠标离开行的背景色效果
                t[i].onmouseout = function () {
                    if (this.x != "1") this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) ? a : b;
                }
            }
        }
    </script>

    <style type="text/css">
        /* 表格默认样式 */
        table {
            border: solid 1px #99CCFF; /* 表格外框线 */
            border-collapse: collapse; /* 合并单元格边框线 */
        }

        /* 标题行样式 */
        th {
            background: #0000FF; /* 背景色 */
            color: #fff;         /* 字体颜色 */
        }
    </style>
</head>

<body>
<table id="grid">
    <caption>IE浏览器发展大事记</caption>

    <tr>
        <th>版本</th>
        <th>发布时间</th>
        <th>绑定系统</th>
    </tr>

    <tr>
        <td>Internet Explorer 1</td>
        <td>1995年8月</td>
        <td>Windows 95 Plus! Pack</td>
    </tr>

    <tr>
        <td>Internet Explorer 2</td>
        <td>1995年11月</td>
        <td>Windows和Mac</td>
    </tr>

    <tr>
        <td>Internet Explorer 3</td>
        <td>1996年8月</td>
        <td>Windows 95 OSR2</td>
    </tr>

    <tr>
        <td>Internet Explorer 4</td>
        <td>1997年9月</td>
        <td>Windows 98</td>
    </tr>

    <tr>
        <td>Internet Explorer 5</td>
        <td>1999年5月</td>
        <td>Windows 98 Second Edition</td>
    </tr>

    <tr>
        <td>Internet Explorer 5.5</td>
        <td>2000年9月</td>
        <td>Windows Millennium Edition</td>
    </tr>

    <tr>
        <td>Internet Explorer 6</td>
        <td>2001年10月</td>
        <td>Windows XP</td>
    </tr>

    <tr>
        <td>Internet Explorer 7</td>
        <td>2006年下半年</td>
        <td>Windows Vista</td>
    </tr>

    <tr>
        <td>Internet Explorer 8</td>
        <td>2009年3 月</td>
        <td>Windows 7</td>
    </tr>

    <tr>
        <td>Internet Explorer 9</td>
        <td>2011年3月</td>
        <td>Windows 7</td>
    </tr>

    <tr>
        <td>Internet Explorer 10</td>
        <td>2013年2月</td>
        <td>Windows 8</td>
    </tr>
</table>

<script language="javascript">
    bg_even("grid", "#fff", "#F5F5F5", "#FFFFCC", "#FFFF84");
</script>
</body>
</html>